<template>
  <div>
    <div class="top">
        <div class="title">
            <span @click="back">&lt;</span>
            <p>个人资料</p>
        </div>
    </div>
    <div class="bottom">
        <van-field
        v-model="username"
        label="用户名"
        placeholder="请填写您的昵称"
        input-align="right"
        />
        <div class="img">
            <span>头像</span>
            <div class="imgs">
                <van-uploader v-model="fileList" max-count="1" preview-size="0.45rem"/>
            </div>
        </div>
        <div class="img">
            <span>性别</span>
            <van-radio-group v-model="radio" direction="horizontal">
                <van-radio name="1">先生</van-radio>
                <van-radio name="2">女士</van-radio>
            </van-radio-group>
        </div>
        <van-field
        v-model="phone"
        label="手机号"
        placeholder="请填写您的手机号码"
        input-align="right"
        />

        <van-button type="primary" class="save" @click="save">保存</van-button>
    </div>
  </div>
</template>

<script>
import axios from '../../request'
export default {
    data() {
        return {
             username: '',
             fileList:[],
             radio:"",
             phone:"",
        }
    },
    created() {
        // axios.get("/api/auth/userInfo").then(data=>{
        //     console.log(data);
        //     this.username=data.data.data.nickName,
        //     // this.fileList[0].file.name=data.data.data.headPortrait,
        //     this.sex=data.data.data.sex=="男"?1:2,
        //     this.phone=data.data.data.phone
        // })
    },
    methods: {
        save(){
            // axios.post("/api/sys/user",{
            //     nickName:this.username,
            //     headPortrait:this.fileList[0].file.name,
            //     phone:this.phone,
            //     sex:this.radio==1?"男":"女",
                
            // }).then(data=>{
            //     console.log(data);
            // })
            console.log(this.username,this.fileList[0].file.name,this.radio,this.phone);
            this.$toast.success("保存成功")
        },
        back(){
            this.$router.back();
        }
    },
}
</script>

<style lang="scss" scoped>
.top{
    height: 0.58rem;
    // background-color: aqua;
    box-sizing: border-box;
    padding: 0 0.28rem;
    border-bottom: 2px solid #E6E6E6;
    .title{
        width: 60%;
        height: 0.58rem;
        font-size: 0.18rem;
        line-height: 0.58rem;
        display: flex;
        justify-content: space-between;
        p{
            font-weight: 600;
            color: #333333;
        }
    }
}
.img{
    height: 0.5rem;
    border-bottom: 1px solid #ebedf0;
    margin:0 0.16rem;
    font-size: 0.14rem;
    line-height: 0.5rem;
    display: flex;
    justify-content: space-between;
    .imgs{
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 0.05rem;
    }
}
.save{
    font-size: 0.16rem;
    width: 2.4rem;
    height: 0.45rem;
    background: #00D2BB;
    border-radius: 0.23rem;
    margin-top: 2.03rem;
    margin-left: 0.75rem;
}

</style>